<template>
  <div class="login-box">
    <h2 class="title">登录</h2>
    <el-form ref="form" :model="form" :rules="loginRules" label-width="80px">
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
        <el-input v-model="form.pwd" show-password placeholder="请输入密码"></el-input>
      </el-form-item>
      
      <el-form-item class="btn-footer">
        <el-button type="primary" @click="onSubmit" class="btn-login">登录</el-button>
        
        <el-button type="text" @click="toRegister" > 去注册 </el-button>
        
      </el-form-item>
    </el-form>
    </div>
</template>

<script>
// import axios from 'axios';
import axiosEl from '@/utils/axios';
import {mapMutations} from 'vuex'
export default {
  data(){
    return {
        form: {
            phone: '',
            pwd: ''
        },
        loginRules:{
          phone:[
            { required: true, message: '请输入手机号', trigger: 'blur'}
            // blur: 失去焦点验证
            // change: value值改变时候验证
          ],
          pwd:[{
            required: true, message: '请输入密码', trigger: 'blur'
          }]
        }
    }
  },
  methods:{
    toRegister(){
      this.$router.push({
        path:'/reg'
      })
    },
    ...mapMutations(['updateUserInfo','updateMenus']),
    onSubmit() {
        // 调用登录接口

        this.$refs.form.validate((valid)=>{
            if(!valid) return;
            axiosEl({
                method:'post',
                url:'/users/login',
                data:this.form
            }).then((res)=>{
                console.log(res);
                if(res.code==1){
                   
                    //成功  登录成功， 记录token  跳转到首页
                    localStorage.setItem('token',res.token);
                      // res.menulist
                    this.updateMenus(res.menulist);
                    // userInfo的信息  需要记录在缓存中 或者vuex中

                    // this.$store.commit('updateUserInfo',res.data)  // 方式一
                    // 方式二： 辅助函数
                    this.updateUserInfo(res.data);
                    this.$router.replace('/');
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'warning'
                    });
                }
                
            })

        })

        
      }
  }
}
</script>

<style lang="scss" scoped>

  .title {
    text-align: center;
    margin-bottom: 30px;
  }
   .login-box {
     width: 400px;
     min-height: 200px;
     border: 1px solid #ccc;
     position: absolute;
     border-radius: 6px;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
     padding: 30px;
     text-align: left;
     background: rgba(255,255,255,0.5);
     box-shadow: 0 0 8px 0px rgba(0,0,0,0.3);
   }

   ::v-deep .btn-footer > div{
      display: flex;
      justify-content: space-between;
      width: 100%;
      // background: red;
      margin-left: 0 !important;
     position: relative;
      :nth-child(2) {
      position: absolute;
      right: 0;
      top: 2px;
      }
    }
  
</style>